<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>简易记账簿</title>
    <meta name="keywords" content="Web,SSR,KeepAccounts"/>
    <meta name="description" content="Express,BootStrap"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/libs/bootstrap@5.2.3.css"/>
</head>
<body>
    <div class="wrapper">
        <header class="d-flex align-items-center justify-content-between">
            <h5>我的简易记账簿·项目列表</h5>
            <button type="button" class="btn btn-primary btn-sm"
                    onclick="window.location.href='/account'">创建新项目</button>
        </header>
        <% if (accounts.length === 0) { %>
            <div>暂无记录，请先创建哦 ^_^</div>
        <% } else if (accounts.length > 0) { %>
            <% accounts.forEach(account => { %>
                <div class="card box-account">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <h6><%= account.date %></h6>
                            <h6><%= account.content %></h6>
                            <span class="badge text-bg-<%= Number(account.type) ? "success" : "danger" %>">
                                <%= Number(account.type) ? "收入" : "支出" %>
                            </span>
                            <h6 class="<%= Number(account.type) ? "income" : "expend" %>"><%= account.money %></h6>
                            <a href="/account/<%= account.id %>">
                                <button type="button" class="btn btn-light btn-sm delete">删除</button>
                            </a>
                        </div>
                        <p class="remark <%= !account.remark && "none" %>"><%= account.remark %></p>
                    </div>
                </div>
            <% }) %>
        <% } %>
    </div>
</body>
</html>
